<!-- subpkg_consult/room/components/prescription-info.vue -->
<script setup>
import { getConsultPre } from '@/apis/doctor';
	const props=defineProps({
		msgType:Number,
		info:Object
	})

	//查看原始处方
	const onPre=async(id)=>{
		const res=await getConsultPre(id)
	  uni.previewImage({
		urls:[res.data.url]
	})
	}
</script>

<template>
  <!-- 处方消息（22） -->
  <view class="e-prescription">
    <view class="prescription-content" v-if="props.msgType===22">
      <view class="list-title">
        <view class="label">电子处方</view>
        <view class="extra" @click="onPre(props.info.id)">
          原始处方
          <uni-icons size="16" color="#848484" type="right" />
        </view>
      </view>
      <view class="list-item">{{props.info.name}} {{props.info.genderValue}} {{props.info.age}}岁 {{props.info.diagnosis}}</view>
      <view class="list-item">开方时间：{{props.info.createTime}}</view>

      <view class="dividing-line"></view>

      <template v-for="item in props.info.medicines" :key="item.id">
				<view class="list-title">
				  <view class="label">
				    <text class="name">{{item.name}}</text>
				    <text class="unit">{{item.specs}}</text>
				    <text class="quantity">x{{item.quantity}}</text>
				  </view>
				</view>
				<view class="list-item">{{item.usageDosag}}</view>
			</template>
     
    </view>
    <navigator
      class="uni-link"
      hover-class="none"
      :url="`/subpkg_medicine/payment/index?id=${props.info.id}`"
    >
      购买药品
    </navigator>
  </view>
</template>

<style lang="scss">
.e-prescription {
  width: 100%;
  margin-top: 60rpx;
  border-radius: 20rpx;
  background-color: #eaf8f6;

  .prescription-content {
    padding: 30rpx;
    border-radius: 20rpx;
    background-color: #fff;
  }

  .list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10rpx;
  }

  .list-item {
    margin-bottom: 10rpx;
    font-size: 26rpx;
    color: #848484;
  }

  .label {
    display: flex;
    justify-content: space-between;
    flex: 1;
    font-size: 32rpx;
    color: #121826;

    &.medicine {
      font-size: 30rpx;
      color: #666;
    }
  }

  .unit {
    width: 200rpx;
  }

  .extra {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #848484;
  }

  :deep(.uniui-right) {
    margin-top: 4rpx;
  }

  .dividing-line {
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #ededed;
  }

  .uni-link {
    text-align: center;
    line-height: 1;
    padding: 30rpx 0;
    color: #16c2a3;
    font-size: 32rpx;
  }
}
</style>